/*----------------------------------------通知样式-----------------------------*/

#notification-main {
  text-align: center;
}

#notification-container {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  position: relative;
}


/*---------------------------------项目筛选--------------------------------*/
#notification-container .notification-sift{
  margin-bottom: 1.2em;
}

#notification-container .notification-sift select {
  margin-left: 1em;
  display: inline-block;
  width: 12em;
}

/*---------------------------------已读与未读的筛选-------------------------*/
#notification-container .read-sift {
  position: absolute;
  top: .7em;
  right: 0;
  font-size: 1.1em;
  color: #5a5a5a;
}

#notification-container .read-sift>span {
  border-radius: 3px;
  padding: 6px;
}

#notification-container .read-sift>span:hover {
  cursor: pointer;
}

#notification-container .read-sift .active {
  background-color: #b5b5b5;
  color: white;

}

/*--------------------------------没有通知样式--------------------------*/
#notification-container .notification-none {
  margin-top: 2em;
  padding: 3em 1em 3em 1em ;
  background-color: #fafafa;
  border-radius: 7px;
}


/*-----------------------------notification list----------------------*/

#notification-container .notification-list {
  border-left: solid 1px #e7e7e7;
}



/*-----------------------------单个通知项------------------------*/
#notification-container .notification-list .notification-item {
  position: relative;
  text-align: left;
  padding-left: 50px;
  background: url(../image/triangle.png) no-repeat;
  background-size: 28px 17px;
  background-position: 4% 0%;
}

/*----------------------通知box---------------------*/
#notification-container .notification-list .notification-box {
  background-color: #f6f6f6;
  padding: 15px 110px 15px 12px;
  color: #808080;
  position: relative;

  margin-bottom: 15px;

}

#notification-container .notification-list .notification-box img {
  position: relative;
  top: -3px;
  float: left;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

#notification-container .notification-list .notification-box .notification-detail {
  margin-left: 38px;
}
#notification-container .notification-list .notification-box .notification-detail .notification-title {
  color: #428bca;
  cursor: pointer;
}

#notification-container .notification-list .notification-box .notification-detail .notification-title:hover {
  text-decoration: underline;
}


#notification-container .notification-list .notification-box .date {
  position: absolute;
  top: 13px;
  right: 10px;
}

#notification-container .notification-list .notification-box .set-read {
  position: absolute;
  top: 40px;
  right: 10px;

  cursor: pointer;
}
#notification-container .notification-list .notification-box .set-read .set-label {
  color: #428bca;
}

/*----------------------左侧类型图标---------------------*/
#notification-container .notification-list .notification-icon {
  position: absolute;
  top: 0;
  left: -17px;
  background-color: #ccc;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  text-align: center;
}

#notification-container .notification-list .notification-icon i {
  color: white;
  font-size: 16px;
  line-height: 34px;

}